<template>
    <div>

        <div class="addBtn">
            <el-dialog title="新增" :visible.sync="dialogTableVisible">

                <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px">



                    <el-form-item label="奖励金额" prop="reward">
                        <el-input v-model="ruleForm.reward" placeholder="请输入奖励球钻">
                            <template slot="append">球钻</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="奖励图标" prop="icon">
                        <el-upload list-type="picture-card" class="avatar-uploader" action="https://api.zctj16888.com/admin/v1/image/ossUpload" :show-file-list="false"
                            :on-success="handleIconSuccess" name="image" :before-upload="beforeIconUpload">
                            <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div class="el-upload__tip">建议尺寸：100×100像素，支持JPG/PNG格式</div>
                    </el-form-item>
                </el-form>


                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="day" label="天数" align="center">
            </el-table-column>
            <el-table-column prop="reward" label="奖励" align="center">
            </el-table-column>
            <el-table-column prop="update_time" label="奖励图标" align="center">

                <template slot-scope="scope">

                    <img style="width: 50px;height: 50px;" :src="scope.row.icon" alt="">

                </template>

            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div style="margin-top: 10px;">
                        <el-button type="primary" icon="el-icon-edit" circle @click="modifyVip(scope.row)"></el-button>


                        <!-- <el-button type="danger" icon="el-icon-delete" circle @click="deleteVip(scope.row)"></el-button> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getSignList as getYhqList, putSign as updateYhq } from '../../../libs/api'
export default {
    data() {
        return {
            typeList: [{ type: 'AI寻胆', id: 1 }, { type: '爆冷预警', id: 2 }, { type: '组合会员卡', id: 3 }],
            wd_id: 1,
            dialogManagementVisible: false,
            rules: {
                // name: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ],
            },
            ruleForm: {
                "title": "",
                "price": "",
                "min_price": "",
                "money": "",
                "status": 1,
                "desc": "",
                "exp_day": '',
                "scene": ''
            },
            options: [{
                value: '选项1',
                label: '上架'
            }, {
                value: '选项2',
                label: '不上架'
            }],
            platformList: [{
                values: '选项1',
                label: 'H5'
            }, {
                values: '选项2',
                label: 'APP'
            }, {
                values: '选项3',
                label: '小程序'
            }],
            values: '',
            value: '',
            input: '',
            sortCard: '',
            content: '',
            dialogImageUrl: '',
            dialogTableVisible: false,
            dialogVisible: false,
            managementData: [],
            // 总数据
            tableData: [],
            currentPage: 1,
            PageSize: 10,
            fileList: [],
            pageSizes: [5, 10],
            typeStatus: '',
            vipLx: '',
            totalCount: 1,
            vipCardId: '',
            dialogAdd: false
        }
    },
    created() {
        this.getVipUserList()
    },
    methods: {
        handleIconSuccess(res, file) {
            // 处理图片上传成功后的逻辑
            this.ruleForm.icon = URL.createObjectURL(file.raw)
            // 实际项目中应该使用服务器返回的URL
            // this.form.icon = res.data.url
        },
        beforeIconUpload(file) {
            const isImage = file.type.includes('image/')
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isImage) {
                this.$message.error('只能上传图片文件!')
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过2MB!')
            }

            return isImage && isLt2M
        },
        showItemFun(v) {
            if (v.status == 1) {
                v.status = 2;

            } else {
                v.status = 1;
            }

            updateYhq(v).then(res => {
                console.log(res)
            })

            // console.log(v)
        },
        selectType(e) {
            this.wd_id = e
            this.getVipCardList()
            // this.ruleForm.typeid = e
            // console.log(this.wd_id)
            // this.getAIlist()
        },
        // 显示第几页
        handleCurrentChange(val) {
            console.log(this.vipCardId)
            // 改变默认的页数
            this.currentPage = val
            this.getVipUserList()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {

            // 改变每页显示的条数
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1

            this.getVipUserList()
        },
        getVipUserList() {
            getYhqList({
            }).then(res => {
                this.tableData = res.data
            })
        },
        clickDeleteAdd() {
            this.dialogAdd = false
        },
        modifyVip(row) {
            console.log(row)
            this.ruleForm = JSON.parse(JSON.stringify(row))
            this.dialogTableVisible = true
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            console.log(fileList);
            console.log(file);
        },
        handleButtonAdd() {
            this.dialogAdd = true
            this.ruleForm.id = ''
            // this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        clickConfirm() {
            updateYhq({
                ...this.ruleForm
            }).then(res => {
                Object.assign(this.ruleForm, {
                    effective_time: '',
                    money: '',
                    type: '',
                    name: ''
                })
                this.ruleForm = {}
                this.getVipUserList()
            })
            this.dialogTableVisible = false
        },
        clickConfirmAdd() {
            updateYhq(
                {
                    ...this.ruleForm
                }
            ).then(res => {
                this.ruleForm = {}
                this.getVipUserList()
            })
            this.dialogAdd = false
        },
        handleButton1Click(id, e) {
            console.log(id)
            this.typeStatus = e
            this.vipLx = id.lx_day
            this.vipCardId = id.id
            vipUserList({
                page: this.currentPage,
                limit: this.PageSize,
                vip_lx: id.lx_day,
                is_dq: e,
                id: id.id
            }).then(res => {
                console.log(res)
                this.managementData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
            this.dialogManagementVisible = true
        },
        handleButtonDelete(e) {

        },
        handleAvatarSuccess(res, file, fileList) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            console.log(URL.createObjectURL(file.raw))
            this.fileList = fileList
            this.ruleForm.img_url = res.data.url
            // this.ruleForm.img_url = URL.createObjectURL(file.raw)
        },
    }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}

.ql-editor {

    height: 300px;

}
</style>
